<!--
*
* 内容主体
*
*
-->
<template>
    <div ref="contentRef" class="content-body-container" :class="screenTypeClass">
        <template v-if="articleArr.length !== 0">
            <article class="article-container" v-show="!noneDataLock" v-for="item in articleArr" :key="item.id">
                <div class="article-inner shadow-box">
                    <div class="article-main">
                        <header class="article-header">
                            <!-- 发布时间 -->
                            <ArticleReleaseTime :createdAt="item.createdAt"></ArticleReleaseTime>
                            <!-- 标题 -->
                            <h2 class="title" @click="goDetails(item)">
                                {{ item.articleTitle }}
                            </h2>
                            <!-- 热度评论点赞 -->
                            <ArticleInfo 
                            :viewsCount="item.viewsCount"
                            :commentsCount="item.commentsCount"
                            :like="item.likesCount"></ArticleInfo>
                        </header>
                        <!-- 内容 -->
                        <div class="content">
                            <p class="mle">{{ item.articleSummary }}</p>
                            <!-- 标签 -->
                            <ArticleTag :tags="item.tags" :tagLength="3"></ArticleTag>
                        </div>
                    </div>
                    <!-- 配图 screenType：移动端适配-->
                    <div class="content-image" 
                    v-if="item.articleCover && screenType != 'small-screen' && 
                    screenType != 'extraSmall-screen'" @click="goDetails(item)">
                        <div class="overlay-image flx-center">
                            <el-icon class="icon-image">
                                <ArrowRightBold />
                            </el-icon>
                        </div>
                        <el-image class="el-image" :src="item.articleCover" fit="cover" ></el-image>
                    </div>
                    <!-- 跳转图标 -->
                    <div 
                    class="content-no-img flx-center"
                    v-if="!item.articleCover && screenType != 'small-screen' && 
                    screenType != 'extraSmall-screen'" @click="goDetails(item)">
                        <el-icon class="icon-image icon-no-image">
                            <ArrowRightBold />
                        </el-icon>
                    </div>
                </div>
            </article>
        </template>
        <Nonedata :text="'暂无更多数据了，点我刷新~~'" v-show="!noneDataLock" v-else class="none-data" @click="refreshClick"></Nonedata>
        <Nonedata v-if="nonedataShow" class="none-data"></Nonedata>
        <Pagination 
        v-show="!noneDataLock"
        :currentPage="offset" 
        :pageSize="limit"
        :count="count"
        :isShow="isShow"
        @currentChange="currentChange"></Pagination>
    </div>
</template>
  
<script setup>
import { computed, watch } from 'vue';
import { useRouter } from 'vue-router';

import { articleStore } from '@/store/article/article';
import { ARTICLE_STATUS } from '@/constants/system/article';

import { formatTimeToStr } from '@/utils/date-util';
import { isEmptyObject, goAnchor } from '@/utils/tools-util';
import { storeToRefs } from 'pinia';
import { websiteStore } from '@/store/system/website';
const { screenType } = storeToRefs(websiteStore());

import svgIcon from '@/components/system/svgicon/svgicon.vue';
import Pagination from '@/components/system/pagination/pagination.vue';
import Nonedata from '@/components/system/nonedata/nonedata.vue';
import ArticleInfo from '@/components/article/article-info/article-info.vue';
import ArticleTag from '@/components/article/article-tag/article-tag.vue';
import ArticleReleaseTime from '@/components/article/article-release-time/article-release-time.vue';

import { ElAnchor, ElAnchorLink } from 'element-plus';

// ========================= 实列挂载之前调用 =========================
// 数据初始化
const { setParam, setArticleInfo, getArticleInfo } = articleStore();
onBeforeMount(() => {
    getList();
});

// ========================= 计算属性 =========================
let isShow = ref(false);
const articleArr = computed(() => {
    isShow.value = !!articleStore().articleList.length;
    return articleStore().articleList
});
// 参数集合
const searchParams = computed(() => articleStore().conditions);
// 暂无更多
const nonedataShow = computed(() => (offset.value === Math.ceil(count.value/limit.value)) && !noneDataLock.value);
// 移动端适配
const screenTypeClass = computed(() => {
    return {
        [`main-${screenType.value}`]:true
    }
});

// ========================= 监听 =========================
// 监听参数变动
watch(() => searchParams, (newValue)=>{
    offset.value = 1;
    getList(newValue.value, () => {
        goAnchor(contentRef.value, 500);
    });
}, { deep: true })

// ========================= 获取数据 =========================
let offset = ref(1);
let limit = ref(10);
let count = ref(0);
let noneDataLock = ref(false);  // 等数据加载完，再渲染组件
async function getList(storeParams, cb) {
    // 1.判断搜索组件的值
    let isnull = storeParams && !isEmptyObject(storeParams);
    let conditions =  {
        params: {
            status: ARTICLE_STATUS.RELEASE_STATE.value,
            articleTitle:'',
        },
        offset: offset.value,
        limit: limit.value,
        order:[['isTop', 'desc'], ['createdAt', 'desc']]
    };
    // 2.如果不是空对象就赋值
    isnull && (conditions.params = storeParams.params);
    noneDataLock.value = true;
    let data = await getArticleInfo(conditions);
    count.value = data.count;
    setArticleInfo(data.data);
    noneDataLock.value = false;
    cb&&cb();
};

// 翻页
// const contentRef = ref(Window);
const contentRef = ref();
function currentChange(value) {
    offset.value = value;
    getList(searchParams.value, () => {
        goAnchor(contentRef.value, 500);
    });
};

// 刷新
function refreshClick() {
    offset.value = 1;
    setParam({});
};

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goDetails(item) {
    router.push({
        path: '/article/detail',
        query: {
            id: item.id
        }
    })
};
</script>
  
<style lang="scss" scoped>
    @import '@/theme/animations';
    @import './content-body.scss';
</style>